import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
import '../App.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import RouterView from '../router/RouterView'
import routes   from '../router/page'
import filterRouter  from '../components/filterRoutes'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;



export default class Main extends Component {
    state = {
        leftList:filterRouter(routes[2].children,sessionStorage.getItem('type')),
    }

    render() {
        const { leftList } = this.state
        return (
            <div className="main">
                <Layout>
                    <Header className="header">
                        <div className="logo"><h2>美洽后台管理系统</h2></div> 
                       
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background">
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['0']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="科普管理">
                                    {/* <Menu.Item key="1">
                                        <NavLink to="/main/one">热点</NavLink>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <NavLink to="/main/two">睡眠</NavLink>
                                    </Menu.Item>
                                    <Menu.Item key="3">
                                        <NavLink to="/main/three">话题</NavLink>
                                    </Menu.Item> */}
                                    {
                                        leftList.length && leftList.map((item,index) => {
                                            return <Menu.Item key={index}>
                                            <NavLink to={item.path}>{item.meta.name}</NavLink>
                                        </Menu.Item>
                                        })
                                    }
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="药品管理">
                                    
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="问询解答">
                                    
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>科普管理</Breadcrumb.Item>
                                <Breadcrumb.Item>药品管理</Breadcrumb.Item>
                                <Breadcrumb.Item>问询解答</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                }}
                            >
                                <RouterView routes={this.props.routes} />
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
